<template>
    <div class="dashboard-editor-container">
        <panel-group @handleSetLineChartData="handleSetLineChartData" />
        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
            <line-chart :chart-data="lineChartData" />
        </el-row>
        <el-row :gutter="32">
            <el-col :xs="24" :sm="24" :lg="12">
                <div class="chart-wrapper">
                    <p style="margin-left: 43%">某时间段住户出入统计</p>
                    <bar-chart />
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12">
                <div class="chart-wrapper">
                    <home-body-chart :chart-data="bodyChartData" />
                </div>
            </el-col>
        </el-row>
    </div>

</template>

<script>
    import PanelGroup from './components/PanelGroup'
    import LineChart from './components/LineChart'
    import BarChart from './components/BarChart'
    import HomeBodyChart from './components/HomeBodyChart'
    import BodyChart from "./components/BodyChart";
    export default {
        name: 'home',
        data(){
            return {
                newUsers : {
                    expectedData: [],
                    actualData: []
                },
                messages: {
                    expectedData: [],
                    actualData: []
                },
                healthRecord: {
                    expectedData: [],
                    actualData: []
                },
                healthStatus: {
                    expectedData: [],
                    actualData: []
                },
                lineChartData: {},
                 bodyChartData: {
                     expectedData: [1,2,3,4,5],
                         actualData: [34,35,36,37,38]
                 }
            }
        },
        components: {
            BodyChart,
            PanelGroup,
            LineChart,
            BarChart,
            HomeBodyChart
        },
        created() {
            this.handleSetLineChartData("newUsers")
            this.queryBodyChartData()
        },
        methods:{
            queryBodyChartData(){
                let that=this
                this.request({
                    url: '/health/averageTemperature',
                    method: 'get',
                }).then(res=>{
                    that.bodyChartData.actualData=res.data.data
                    that.bodyChartData.expectedData=res.data.title
                })
            },
            handleSetLineChartData(type) {
                let that=this
                if (type=="newUsers"){
                    this.request({
                        url: '/user/data/Bymonth',
                        method: 'get',
                    }).then(res=>{
                        that.newUsers.actualData=res.data.newData
                        that.newUsers.expectedData=res.data.oldData
                        that.lineChartData = that.newUsers
                    })
                }
                else if (type=="messages"){
                    this.request({
                        url: '/system/data/Bymonth',
                        method: 'get',
                    }).then(res=>{
                        that.messages.actualData=res.data.newData
                        that.messages.expectedData=res.data.oldData
                        that.lineChartData = that.messages
                    })
                }
                else if (type=="healthRecord"){
                    this.request({
                        url: '/health/recordBymonth',
                        method: 'get',
                    }).then(res=>{
                        that.healthRecord.actualData=res.data.newData
                        that.healthRecord.expectedData=res.data.oldData
                        that.lineChartData = that.healthRecord
                    })
                }
                else if (type=="healthStatus"){
                    this.request({
                        url: 'health/statusBymonth',
                        method: 'get',
                    }).then(res=>{
                        that.healthStatus.actualData=res.data.newData
                        that.healthStatus.expectedData=res.data.oldData
                        that.lineChartData = that.healthStatus
                    })
                }
            },
        }
    }
</script>
<style lang="scss" scoped>
    .dashboard-editor-container {
        padding: 32px;
        background-color: rgb(240, 242, 245);
        position: relative;

        .github-corner {
            position: absolute;
            top: 0px;
            border: 0;
            right: 0;
        }

        .chart-wrapper {
            background: #fff;
            padding: 16px 16px 0;
            margin-bottom: 32px;
        }
    }

    @media (max-width:1024px) {
        .chart-wrapper {
            padding: 8px;
        }
    }
</style>